<template>
  <div class="demo">
    <div class="demo-title">右键菜单</div>
    <div class="demo-content">
      <Tree v-model:expandedKeys="expandedKeys" :tree-data="treeData">
        <template #title="{ key: treeKey, title }">
          <Dropdown :trigger="['contextmenu']">
            <span>{{ title }}</span>
            <template #overlay>
              <Menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
                <Menu.Item key="1">1st menu item</Menu.Item>
                <Menu.Item key="2">2nd menu item</Menu.Item>
                <Menu.Item key="3">3rd menu item</Menu.Item>
              </Menu>
            </template>
          </Dropdown>
        </template>
      </Tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import Dropdown from '@sscd/dropdown';
  import Menu from '@sscd/menu';
  import Tree from '@sscd/tree';
  const treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            { title: '0-0-0-0', key: '0-0-0-0' },
            { title: '0-0-0-1', key: '0-0-0-1' },
            { title: '0-0-0-2', key: '0-0-0-2' },
          ],
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            { title: '0-0-1-0', key: '0-0-1-0' },
            { title: '0-0-1-1', key: '0-0-1-1' },
            { title: '0-0-1-2', key: '0-0-1-2' },
          ],
        },
      ],
    },
  ];
  const onContextMenuClick = (treeKey: string, menuKey: string | number) => {
    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
  };
  const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  watch(expandedKeys, () => {
    console.log('expandedKeys', expandedKeys);
  });
</script>
